<template>
	<div v-loading="loading" style="min-height: 100px;float: left;width: 100%">
		<div v-for="(bf,index) in title">
			<li><b>{{index+1}}.{{bf.title}}</b></li>
			<div  v-loading="bf.type == 'PERIOPERATION'?ing:ing2" class="tag-load">
				<template v-if="bf.currentValue!=''">
					<div class="tag-width">
						<el-tag
								:key="tag"
								v-for="tag in bf.currentValue"
								:closable="true"
								type="gray"
								@close="handleClose(tag)"
						>
							{{tag.content}}
						</el-tag>
					</div>
				</template>
				<template v-else>
					<div class="tishi">暂时没有任何{{bf.title}}</div>
				</template>
				<div v-if="bf.inputVisible" style="width: 85%;padding-left: 10px">
					<wt-autocomplete
							class="selct-input"
							v-model="bf.inputValue"
							:allow-add="true"
							ref="saveTagInput"
							:query="hickey"
							placeholder="请输入并发症关键字或拼音进行查询"
							:paramsData="bf.type == 'PERIOPERATION'?paramsData1:paramsData2"
							@select="handleInputConfirm(bf.type)"
					></wt-autocomplete>
				</div>
				<div class="plus-button" v-else>
					<el-button v-if="allowEdit" class="button-new-tag" size="small" @click="showInput(bf.type)" icon="plus" type="primary">添加并发症</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import ElementUI from 'element-ui'
    import ModelUtils from '../../../Resources/utils/wt-model-utils';
    import request from 'winged/utils/axios';
    import AutoComplete from 'winged/components/wt-autocomplete'
	Vue.use(ElementUI);
    Vue.component(AutoComplete.name, AutoComplete);
	const FollowUp = "FOLLOW_UP";
	const PerioperaTion="PERIOPERATION";
    var i=0;
	export default {
		name: 'wt-case-complication-info',
		props: {
			model: {
				type: Object,
				required: true
			},
			value:function(){
			    return{
			        type:Object,
                    required:true
			    }
			},
            second:function(){
			    return{
			        type:Object,
                    required:true
			    }

			},
            paramsData: {
                type: Object,
                default: null
            },
            autoLoad: {
                type: Boolean,
                default: false
            },
            multiSelect: {
                type: Boolean,
                default: true
            },
            allowEdit: {
                type: Boolean,
                default: false
            }
		},
		data(){
            return {
                loading: false,
				ing:false,
                ing2:false,
                hickey: {
                    url: 'doctor/patient/complication/type',
                    filterParam: 'fuzzy_name',
                    method: 'GET',
                    transfer: true,
                    pagination: true,
					extraParams: [
						'type'
					],
                    value: 'complication',
					label: 'complication',
					allowAdd: true,
					addMethod: 'POST',
					addParam: 'complication',
                },
				paramsData1: {
                    type: PerioperaTion
				},
				paramsData2: {
                    type: FollowUp
				},
                title:[
                    {
                        'title':'围手术期并发症',
                        'type':PerioperaTion,
                        'currentValue':this.value,
						'inputVisible':false,
						'inputValue':''
                    },
                    {
                        'title':'随访并发症',
                        'type':FollowUp,
                        'currentValue':this.second,
						'inputVisible':false,
						'inputValue':''
                    }
                ]
            }
		},
        computed: {
            query: function() {
                return this.model.query;
            }
        },
        methods:{
            load(){
                require('winged/utils/axios');
                this.data(PerioperaTion);
                this.data(FollowUp);
                i = 0;
			},
			data(type){
                let vm = this;
                vm.loading=true;
				let form = {};
                ModelUtils.buildQueryExtraParams(this.query, this.paramsData, form);
                form.complication_type = type;
                window.axios.wtCall(vm.query.url,vm.query.method,form).then(function (response) {
                    let data = null;
					if (response.data.content){
                        if(response.status == 200){
                            data = response.data.content;
                            if(typeof(data) == 'string') {
                                data = JSON.parse(data);
                            }
                            if (type == PerioperaTion){
                                vm.title[0].currentValue = data;
                            }else {
                                vm.title[1].currentValue = data;
                            }
                        }
					}
                    else {
                        vm.$message.error('数据加载出错');
                    }
                    i = i+1;
                    if (i == 2){
                        vm.loading = false;
					}
                }).catch(function(error){
                    console.log(error);
                    vm.$message.error('加载出错');
                    i = i+1
                    if (i == 2){
                        vm.loading = false;
                    }
                });
			},
            handleClose(tag){
                let vm = this;
                require('winged/utils/axios');
                let path = 'doctor/patient/complication';
                this.$confirm('您确定删除"'+tag.content+'"并发症吗？', '操作提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (tag.complicationType==PerioperaTion) {
                        vm.ing = true;
                    }else {
                        vm.ing2 = true;
					}
                    request(path, 'DELETE', {complication_id : tag.id}, true, function (data) {
                        vm.$message.success('删除成功')
                        if (tag.complicationType==PerioperaTion){
                            vm.ing = false;
                            vm.title[0].currentValue.splice(vm.title[0].currentValue.indexOf(tag), 1);
                        }
                        else {
                            vm.ing2 = false;
                            vm.title[1].currentValue.splice(vm.title[1].currentValue.indexOf(tag), 1);
                        }
                    },function (error) {
                        if(tag.complicationType==PerioperaTion){
                            vm.ing = false;
                        } else {
                            vm.ing2 = false;
                        }
                        vm.$message.error('删除失败')
                    });
                }).catch(() => {
                });

			},
            showInput(obj) {
                if (obj == PerioperaTion){
                    this.title[0].inputVisible = true;
				}
				else {
                    this.title[1].inputVisible = true;
                }
            },
            handleInputConfirm(obj) {
                if (obj == PerioperaTion){
                    var inputValue = this.title[0].inputValue;
				}else {
                    var inputValue = this.title[1].inputValue;
				}

                if (inputValue.replace(/^\s\s*/, "").length==0){
                    this.$message.error('并发症名称不能为空')
                }else {
                    if (obj == PerioperaTion){
                        this.ing = true;
					}else {
                        this.ing2 = true;
					}
                    this.addtag(obj,inputValue);
                }
            },
			addtag(type,val){
                let path = 'doctor/patient/complication';
                let data = {};
                data.case_id = this.paramsData.case_id;
                data.content = val;
                data.complication_type = type;
                let vm = this;
                request(path, 'post', data, true, function (data) {
                    var data = JSON.parse(data);
                    vm.$message.success('新建成功');
                    vm.title[0].inputValue = '';
                    vm.title[1].inputValue = '';
					if(type==PerioperaTion){
                        vm.ing = false;
                        vm.title[0].currentValue.push({
                            content:val,
                            caseId:vm.paramsData.case_id,
                            complicationType:type,
                            id:data.id
                        });
                        vm.title[0].inputVisible = false;
                    } else {
                        vm.ing2 = false;
                        vm.title[1].currentValue.push({
                            content:val,
                            caseId:vm.paramsData.case_id,
                            complicationType:type,
                            id:data.id
                        });
                        vm.title[1].inputVisible = false;
					}
                }, function (error) {
                    if(type==PerioperaTion){
                        vm.ing = false;
                        vm.title[0].inputVisible = false;
                    } else {
                        vm.ing2 = false;
                        vm.title[1].inputVisible = false;
                    }
                    vm.$message.error('添加失败')
                });
			}
        },
        created() {
            if(this.autoLoad&&this.title[0].currentValue == null) {
                this.load();
            }
        }
	}

</script>
<style scoped>
	li{
		list-style-type:none;
		font-size: 14px;
		width: 100%;
		display:-webkit-inline-box;
		margin-top: 10px;
	}
	.el-tag{
		margin: 10px 0 8px 10px;
		min-height: 30px;
		line-height: 28px;
		font-size: 15px;
	}
	.tishi{
		line-height: 40px;
		color: #999;
		margin-left: .5em;
	}
	.button-new-tag{
		margin-left: 5px;
		font-size: 15px;
	}
	.input-new-tag{
		height: 30px;
		line-height: 30px;
	}
	.selct-input{
		width: 80%;
		max-width: 500px!important;
		float: left;
	}
	.plus-button{
		padding-left: 5px;
	}
	.tag-width{
		width: 100%;
		float: left;
	}
	.tag-load{
		min-height: 50px;
		height: auto;
		float: left;
		width: 100%;
	}
</style>